<template>
  <div class="app">
    <div class="topbar">
      <topbar/>
    </div>
    <div class="title">
      <div class="sho_car_el_center">
        <div class="logo_img">
          <a href="http://localhost:8080/#/"
          ><img src="../assets/images/logo/xiaobaishop_1.jpg"
          /></a>
        </div>
        <div class="center">
          <div class="btn">
            <el-button type="primary">搜索</el-button>
          </div>
          <div class="quart_input">
            <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            <input type="text" placeholder="请输入搜索内容"/>
          </div>
        </div>
      </div>
    </div>
    <div class="shopcar_body">
      <div class="shopcar_center">
        <div class="shop_car_title">
          <div class="shop_car_title_center">
            <div class="shop_car_title_height_center">
              <div class="shop_car_title_text">
                <span>购物车全部({{cart_count}})</span>
              </div>
              <div class="shop_car_sum">
                <div class="shop_car_selected_commodity">
                  <span>已选商品(不含运费)</span>
                </div>
                <div class="shop_car_mony">
                  <span>总价:{{ shop_count_price }}</span>
                </div>
                <div class="shop_car_title_btn">
                  <router-link to="/settlement">
                    <el-button type="primary">结算</el-button>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="shop_car_body">
          <!-- 此div为表头  -->
          <div class="shop_car_body_table_head">
            <div class="shop_car_sheet_title">
              <ul>
                <!-- 全选复选框 -->
                <li class="shop_car_chk_title">
                  <div class="shop_car_chk_title_sun">
                    <input
                      type="checkbox"
                      @change="all_select"
                      v-model="all_select_status"
                      class="shop_checkbox_input"
                    />
                    <span>全选</span>
                  </div>
                </li>
                <li class="shop_car_item_sheet_title">
                  <div class="shop_car_sheet_title_father">
                    <span>商品信息</span>
                  </div>
                </li>
                <li class="shop_car_info_title"></li>
                <li class="shop_car_price_title">
                  <div class="shop_car_sheet_title_father">
                    <span class="shop_car_span">单价</span>
                  </div>
                </li>
                <li class="shop_car_count_title">
                  <div class="shop_car_sheet_title_father">
                    <span class="shop_car_span">数量</span>
                  </div>
                </li>
                <li class="shop_car_price_sum_title">
                  <div class="shop_car_sheet_title_father">
                    <span class="shop_car_span">金额</span>
                  </div>
                </li>
                <li class="shop_car_op_title">
                  <div class="shop_car_sheet_title_father">
                    <span>操作</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 订单列表 -->
          <div class="shop_order_list">
            <div
              class="shop_car_order_body"
              v-for="(shopItem, shop_index) in shop_car_list"
              :key="shop_index"
            >
              <div class="shop_car_oder_shopName">
                <!-- <input type="checkbox" v-model="item.check_stauts" @change="item_change(index)"/> -->
              </div>
              <div class="shop_car_order_body_title">
                <span class="shop_name_text">店铺:{{ shopItem.shop }}</span>
              </div>
              <div
                class="shop_car_order_contenct"
                v-for="(item, item_index) in shopItem.shop_car_list_name"
                :key="item_index"
              >
                <div class="shop_car_order_contenct_center">
                  <div class="shop_car_order_table_center">
                    <ul>
                      <!-- 复选框选项 -->
                      <li class="shop_car_chk">
                        <div class="shop_checkbox">
                          <input
                            type="checkbox"
                            v-model="item.check_stauts_shop"
                            class="shop_checkbox_input"
                            @change="item_change()"
                          />
                        </div>
                      </li>
                      <li class="shop_car_item">
                        <div class="shop_car_item_body">
                          <div class="shop_car_itemImg">
                            <router-link :to="{path:'/items',query:{id:item.shop_item_id}}">
                              <img src="../assets/images/shop_car_Img/logoko.png"/>
                            </router-link>
                          </div>
                          <div class="shop_car_item_title">
                            <router-link :to="{path:'/items',query:{id:item.shop_item_id}}">{{ item.shop_title }}</router-link>
                          </div>
                          <div class="shop_car_item_message"></div>
                        </div>
                      </li>
                      <!-- 商品描述 -->
                      <li class="shop_car_info">
                        <div class="shop_car_info_body">
                          <span class="shop_car_info_body_text"
                          >颜色分类：{{}} <br/>高度:{{}}
                          </span>
                        </div>
                      </li>
                      <!-- 商品单价 -->
                      <li class="shop_car_price">
                        <span class="shop_car_oder_one_price"
                        >￥{{ item.shop_price }}</span
                        >
                      </li>
                      <!-- 商品计数 -->
                      <li class="shop_car_count">
                        <div class="shop_car_count_body">
                          <div class="shop_car_oder_count">
                            <el-input-number
                              size="small"
                              v-model="item.count"
                              @change="handleChange(shop_index, item_index)"
                              :min="1"
                              :max="10"
                              label="数量"
                            ></el-input-number>
                          </div>
                        </div>
                      </li>
                      <!-- 店铺金额合计 -->
                      <li class="shop_car_price_sum">
                        <span class="shop_car_price_sum_text"
                        >￥{{ item.shop_price * item.count }}</span
                        >
                      </li>
                      <!-- 商品操作 -->
                      <li class="shop_car_op">
                        <div class="shop_car_op_body">
                          <span class="shop_car_op_body_text">
                            <a href="https://www.baidu.com">移入收藏夹</a>
                            <br/>
                            <a @click="open">删除</a>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="shop_car_null_box"></div>
        <div class="shop_car_bottom">
          <div class="shop_car_bottom_center">
            <div class="shop_car_bottom_height_center">
              <div class="shop_car_bottom_btn">
                <router-link to="/settlement">
                  <el-button type="primary">结算</el-button>
                </router-link>
              </div>
              <div class="shopp_car_txt">
                <span
                >合计(不含运费):
                  <span class="shopp_car_txt1">{{
                      shop_count_price
                    }}</span></span
                >
              </div>
              <div class="shop_car_txt_select">
                <span
                >已选商品<span class="shopp_car_txt1">{{
                    selected_count
                  }}</span
                >件</span
                >
              </div>
              <div class="shop_car_chk_text_bottom">
                <div class="shop_car_chk_bottom">
                  <input
                    type="checkbox"
                    v-model="all_select_status"
                    @change="all_select"
                    class="shop_checkbox_input"
                  />
                </div>
                <div class="check_text">
                  <span>全选</span>
                </div>
                <div class="shop_car_del">
                  <el-button type="text" @click="openSum"
                  ><span class="shop_car_del_text"
                  ><a class="shop_car_del_text_a">删除</a></span
                  ></el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <bottom/>
    </div>
  </div>
</template>

<script>
import topbar from "@/components/topbar.vue";
import Bottom from "@/components/bottom.vue";

export default {
  name: 'ShoppingCart',
  components: {topbar, Bottom},
  data() {
    return {
      input: "",
      all_select_status: false,
      shop_count_price: 0,
      selected_count: 0,
      cart_count:100,
      shop_car_list: [
        {
          shop_id: 1,
          shop: "小白商店",
          check_stauts: false,
          shop_car_list_name: [
            {
              shop_item_id: 1,
              shop_openid: "123456789",
              shop_title: "商品标题",
              count: 1,
              shop_price: "100",
              shop_index_img: "../assets/images/xiaobaishop_1.jpg",
              check_stauts_shop: false,
            }
          ],
        },
      ],
    };
  },
  created() {
    // 页面自动滚动到顶部
    this.scrollTop();
    var data = this.shop_car_list
    var data2 = JSON.stringify(data)
    console.log(data2)
  },
  methods: {
    /**
     * 后端还需要返回购物车总数量
     *  this.cart_count
     */
    scrollTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    item_change() {
      this.all_select_status = false;
      var flag = false;
      var count = 0;
      var price = 0;
      for (var i = 0; i < this.shop_car_list.length; i++) {
        for (
          var j = 0;
          j < this.shop_car_list[i].shop_car_list_name.length;
          j++
        ) {
          if (!this.shop_car_list[i].shop_car_list_name[j].check_stauts_shop) {
            flag = true;
          } else {
            count++;
            price += Number(
              this.shop_car_list[i].shop_car_list_name[j].shop_price *
              this.shop_car_list[i].shop_car_list_name[j].count
            );
          }
        }
      }

      this.shop_count_price = price;
      this.selected_count = count;

      if (flag) {
        this.all_select_status = false;
      } else {
        this.all_select_status = true;
      }
    },
    all_select() {
      var flag = false;
      if (this.all_select_status) {
        flag = !flag;
      }
      var count = 0;
      var price = 0;
      for (var i = 0; i < this.shop_car_list.length; i++) {
        for (
          var j = 0;
          j < this.shop_car_list[i].shop_car_list_name.length;
          j++
        ) {
          this.shop_car_list[i].shop_car_list_name[j].check_stauts_shop = flag;
          count++;
          price += Number(
            this.shop_car_list[i].shop_car_list_name[j].shop_price *
            this.shop_car_list[i].shop_car_list_name[j].count
          );
        }
      }
      this.all_select_status = flag;
      if (this.all_select_status) {
        this.shop_count_price = price;
        this.selected_count = count;
      } else {
        this.shop_count_price = 0;
        this.selected_count = 0;
      }
    },
    handleChange(shopIndex, itemIndex) {
      // var a = this.shop_car_list[shopIndex].shop_car_list_name[itemIndex].count * this.shop_car_list[shopIndex].shop_car_list_name[itemIndex].shop_price;

      this.item_change()
    },
    openSum() {
      this.$confirm("此操作将清空购物车，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            // 如果单击确定 就让按钮转圈圈
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 100);
            }, 1000);
          } else {
            // 否则就关闭
            done();
          }
        },
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    open() {
      this.$confirm("此操作将删除该物品，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            // 如果单击确定 就让按钮转圈圈
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 100);
            }, 1000);
          } else {
            // 否则就关闭
            done();
          }
        },
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.el-button--primary:focus {
  background-color: #958a7e90;
  border-color: #958a7e90;
}

.el-button--primary:hover {
  background-color: #958a7e90;
  border-color: #958a7e90;
}

.el-button--primary {
  color: #fff;
  background-color: #958a7e;
  border-color: #958a7e;
}

.shop_car_del_text_a:hover {
  text-decoration: underline;
  color: #f40;
}

.shop_car_del_text {
  color: #000000;
  font-size: 15px;
}

.logo_img img {
  width: 100px;
  height: 80px;
}

.logo_img {
  width: 100px;
  height: 80px;
  float: left;
}

.quart_input input {
  border-radius: 30px;
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 30px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: 14px;
  /* height: 40px; */
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.quart_input {
  width: auto;
  line-height: 64px;
  float: right;
  border-radius: 30px;
}

.btn button {
  border-radius: 30px;
}

.btn {
  width: 80px;
  height: 100%;
  float: right;
  line-height: 64px;
}

.center {
  width: 1080px;
  height: 80%;
  /* background-color: red; */
  /* 垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  float: right;
}

.sho_car_el_center {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  /* background-color: #a0a0a0; */
  position: relative;
}

.shop_car_del {
  width: 30px;
  height: 100%;
  font-size: 14px;
}

.check_text span {
  width: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.check_text {
  width: 50px;
  position: relative;
}

.shop_car_chk_text_bottom {
  width: auto;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
}

.shop_car_chk_bottom input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shop_car_chk_bottom {
  width: 20px;
  height: 100%;
  /* 垂直居中 */
  position: relative;
}

.shop_car_txt_select {
  width: auto;
  height: 100%;
  float: right;
  padding-right: 20px;
}

.shopp_car_txt1 {
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  color: #f40;
}

.shopp_car_txt span {
  width: 120px;
  /* 垂直居中 */
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
}

.shopp_car_txt {
  width: auto;
  height: 40px;
  float: right;
  position: relative;
}

.shop_car_bottom_btn {
  width: 80px;
  height: 100%;
  float: right;
}

.shop_car_bottom_height_center button {
  float: right;
  border-radius: 30px;
}

.shop_car_bottom_height_center {
  width: 100%;
  height: auto;
  /* 垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shop_car_bottom_center {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.shop_car_null_box {
  width: 100%;
  height: 19px;
  border-bottom: 1px solid #ccc;
}

.shop_car_bottom {
  width: 100%;
  height: 70px;
}

.shop_car_span {
  font-size: 15px;
  margin-right: 19px;
}

.shop_car_sheet_title_father {
  width: 100px;
  margin: 0 auto;
  text-align: center;
  /* 垂直居中 */
}

.shop_car_op_title {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_car_price_sum_title {
  width: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_car_count_title {
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_car_price_title {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_car_info_title {
  width: 210px;
}

.shop_car_item_sheet_title {
  width: 360px;
  /* 垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_car_chk_title_sun span {
  font-size: 15px;
  font-weight: bold;
  margin-left: 10px;
}

.shop_car_chk_title_sun {
  width: 100%;
  height: auto;
  /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

.shop_car_chk_title {
  width: 80px;
  height: 50px;
  /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop_car_sheet_title ul {
  height: 100%;
}

.shop_car_sheet_title li {
  height: 100%;
  float: left;
}

.shop_car_sheet_title span {
  font-size: 15px;
  font-weight: bold;
}

.shop_car_sheet_title {
  width: 100%;
  height: 100%;
}

.shop_name_text {
  font-size: 14px;
  color: #333;
}

.shop_car_oder_shopName {
  width: 10px;
  height: 20px;
  float: left;
  /* 水平居中 */
  margin: 0 10px auto;
}

.shop_car_op_body_text a:hover {
  text-decoration: underline;
  color: #f40;
  /* 把指针变换为手 */
  cursor: pointer;
}

.shop_car_op_body_text a {
  color: #000000;
}

.shop_car_op_body_text {
  font-size: 14px;
}

.shop_car_op_body {
  width: 100%;
  height: 100%;
}

.shop_car_price_sum_text {
  /* 加粗 */
  font-weight: bold;
  color: #f40;
}

.shop_car_oder_count {
  /* 垂直居中 */
}

.shop_car_count_body {
  width: 100%;
  height: 100%;
}

.shop_car_oder_one_price {
  /* 字体加粗 */
  font-weight: bold;
}

.shop_car_op {
  width: 100px;
}

.shop_car_price_sum {
  width: 130px;
}

.shop_car_count {
  width: 180px;
}

.shop_car_price {
  width: 80px;
}

.shop_car_info {
  width: 210px;
}

.shop_car_info_body {
  width: 100%;
  height: 100%;
  margin-left: 10px;
}

.shop_car_info_body_text {
  color: #00000050;
  font-size: 14px;
}

.shop_car_item_title a:hover {
  text-decoration: underline;
  color: #f40;
}

.shop_car_item_title a {
  color: #000000;
  font-size: 14px;
}

.shop_car_item_title {
  width: calc(100% - 100px);
  float: left;
}

.shop_car_item_body {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-wrap: nowrap; */
}

.shop_car_itemImg img {
  width: 100px;
  height: 100px;
}

.shop_car_itemImg {
  width: 100px;
  height: 100px;
  float: left;
}

.shop_car_item {
  width: 330px;
}

.shop_checkbox {
  width: 30px;
  height: 30px;
  float: right;
}

.shop_checkbox_input {
  width: 16px;
  height: 16px;
  position: relative;
  top: 7px;
  left: 7px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 11px;
  margin-right: 10px;
}

.shop_car_chk {
  width: 50px;
  /* 复选框 */
}

.shop_car_order_table_center li {
  height: 100%;
}

/* 子级盒子绝对定位方可居中 */
.shop_car_order_table_center {
  width: 100%;
  height: 80%;
  /* 垂直居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.shop_car_order_contenct_center ul {
  height: 100%;
}

.shop_car_order_contenct_center li {
  height: 100%;
  float: left;
}

/* 父级盒子相对定位 */
.shop_car_order_contenct_center {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #e8e2e0;
  position: relative;
}

.shop_car_order_contenct {
  width: 100%;
  height: 132px;
  margin-top: 10px;
}

.shop_car_order_body_title {
  width: 100%;
  height: 38px;
}

/* 商铺详细信息 */
.shop_car_order_body {
  width: 100%;
  height: auto;
  background-color: white;
  padding-top: 10px;
}

/* 订单列表 */
.shop_order_list {
  width: 100%;
  height: calc(100% - 50px);
}

/* 表头的渲染 */
.shop_car_body_table_head {
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
}

.shop_car_body {
  width: 100%;
  height: auto;
}

.shop_car_selected_commodity span {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.shop_car_selected_commodity {
  width: 180px;
  height: 100%;
}

.shop_car_mony span {
  /* 字体居中 */
  display: inline-block;
  width: 100%;
  text-align: center;
}

.shop_car_mony {
  width: 140px;
  height: 100%;
  font-size: 20px;
  /* 字体加粗 */
  font-weight: bold;
}

.shop_car_sum {
  /* 元素不换行 */
  display: flex;
  flex-wrap: nowrap;
  /* 垂直居中 */
  justify-content: center;
  align-items: center;
}

.shop_car_title_btn button {
  border-radius: 30px;
}

.shop_car_title_text span {
  font-size: 20px;
  /* 字体加粗 */
  font-weight: bold;
}

.shop_car_title_text {
  width: auto;
  height: 100%;
  float: left;
}

.shop_car_title_height_center {
  width: 100%;
  height: auto;
  display: flex;
  /* 垂直居中 */
  align-items: center;
  justify-content: space-between;
}

.shop_car_title_center {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop_car_title {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #ccc;
}

.shopcar_center {
  width: 1200px;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  /* 圆角 */
  border-radius: 30px;
}

.shopcar_body {
  width: 100%;
  /* height: calc(100% - 130px); */
  padding-top: 20px;
  /*背景颜色是淡灰色 */
  background-color: #e8e2e0;
}

.topbar {
  height: auto;
  width: 100%;
}

.app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.title {
  width: 100%;
  height: 80px;
  font-size: 20px;
  background-color: white;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  /* display: flex;
  justify-content: center;
  align-items: center; */
  position: relative;
}
</style>
